/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text,
    Select,
    InputDatalist, CheckSwitch,
    InputLine, LineColumn,
    Input, CommitInput, SuffixInput, InputPure, IconButton, IconAnchor
} from "customize-easy-ui-component";
//import {UnitOrChoose} from "../../unit/UnitOrChoose";
import {useUnitObjToInput, useUnitObjToInputs} from "../../common/tool";
import { 使用状态s, } from "../../pipeline/edit/管道单元";
import {DivisionChoose} from "../../unit/division/DivisionChoose";
import {AdminunitChoose} from "../../common/geo/AdminunitChoose";
import {VillageChoose} from "../../common/geo/VillageChoose";
import {GeoMapChoose} from "../../common/geo/GeoMapChoose";
import {ChooseUnit} from "../../unit/ChooseUnit";


/**编辑器拆分成几个部分：
 * 有些字段看起来不像是设备该有的，应该划为施工告知单申请才入填写的{业务审批说明细节},不应当放到设备台账编辑器当中。
 * */

export const 事故隐患类别=['一般','严重','重大','特大','特别重大'];  //接口和DB直接用1,2,3,4,5整数序号存储。
//export const 施工类别s=["安装","新装", "锅炉安装","新炉安装", "移装","改造", "旧炉移装", "新装验收","新安装","锅炉改造"]
export const 进口类型=['国产','部件进口','整机进口'];   //硬编码Enum模式： null=都没选择的,1='国产', 2='部件进口' ,3='整机进口'
//export const 注登状态=['TODOREG','REG','CANCEL'];
//【特别注意】按照序号对照转换！。 Enum模式(数据库实际是Byte的,Graphql实际是标识符字符串)列表所对应的中文描述：
//export const 注登状态文=[];
export const 注登状态s=[['TODOREG','待注册'],['REG','在册'],['CANCEL','注销登记']];
export const eqpRegStateMap = new Map();
注登状态s.map(([enumt,desc],i) => (eqpRegStateMap.set(enumt, desc)) );
export const 安全管理部门=['无内设管理部门','内设管理部门','内设分支机构'];  //'0'null:'无内设管理部门'},{1,:'内设管理部门'},{'2',:'内设分支机构';
//新做法：避免不配对的版本。
export const 业务类型s=[["REGUL","定期（内部、全面）检验"],["ANNUAL","年度（外部、在线）检验"],["INSTA","安装监检"],["FIRST","首检"],
    ["TEST","检测"],["DELIVERY","验收"],["ESTIMATE","评估"],["EXPERIMENT","试验"],["IDENTIFIC","鉴定检验"],["MANUFACT","制造监检"],
    ["PRESSURE","耐压试验"],["PRODUCT","产品质量检验"],["REFORM","改造监检"],["REPAIR","重大修理"],["SAFETYINS","进口安全性能检验"],
    ["THERMAL","热效率测试"],["TYPETST","型式试验"],["OTHER","其它"]];
export const businessTypeMap = new Map();
业务类型s.map(([enumt,desc],i) => (businessTypeMap.set(enumt, desc)) );
//不是行政区划的对应也可以的。
export const 制造国s=["中国","美国","欧盟","非主流国家"];
export const 公众聚集场所=['学校','幼儿园','医院','车站','客运码头','商场','体育场馆','展览馆','公园','其它公众聚集场所'];


/**极高的关联强度啊，数据项目特多的，如何肢解出来重用的部分：
 * 只好搞出参数很多个啊：
 * 对上级组件暴露：配对CommnBase组件的内部状态字段，其实就只需[x,setX]的x字段。
 * 容器图号VESSEL_PICNO：改为直接用 设计图号。
 * 设备等级level字段分开{每种设备级别不统一/不需要填}；
 * 有个缺点：把Eqp给它转换，又没有保留透传eqp,有些字段是对象复杂字段或者只读的字段。
 * 这个svp入口参数传递进来的svp?格式{edtIn.svp{对象化了}}一致，已经把json字符串转为了{对象}。
 * ndt是伪对话框返回值后，从?.state中恢复的已经保存的当前编辑器已修改的数据(可能嵌套2层的伪对话框=俩次返回)。
 * qs:any= 作废！
 * ndt svp pa 这三个是修改后的最新数据。 参数eqp是原始未修改的数据。 ndt?可能=null的; ndt非空就是=保存的state恢复的。
 * */
export function useCommnBaseParm(eqp:any, svp:any, pa:any, ndt:any)
{
    //旧的做法：@这个位置edtIn实际上已经被ndt所合并掉了。 导致显示问题产生：useu:使用单位 身份证号码 不一致，滞后？
    //console.log("useCommnBaseParm_hg23readOnly=1useu=", edtIn['useu']);
    //剥离掉Unit模型的对象字段中的多余信息，只保留用于编辑器输入选择需要的id+name两个字段，其他的?.person...company...都要清除掉。
    const unitsObj= useUnitObjToInputs(ndt?? eqp,'makeu','owner','remu','repu','insu','mtu','ispu','useu');

    //外部已做 const edt = ndt&&qs?.emodel==='设备'&&ndt.id===eqp.id?  ndt : eqp; 编辑恢复状态还是初始化或没有经过ndt保存恢复的；
    const edt = ndt?  ndt : {...eqp, ...unitsObj };
    //@运行到这 ## edt.useu:{id ,name}就会只剩下两个字段了，其它数据?.person...已经抹除。 edtIn可能有?.person除非没用ndt合并的话。

    const {save, }= window.history.state?.state??{};      //通用伪对话框传递格式field=上次跳转目标选择字段。
    //console.log("useCommnBaseParm_hg23readOnly=2useu=", edt['useu']);

    const [cpa, setCpa] = React.useState(edt.cpa);
    const [vital, setVital] = React.useState(edt.vital);
    const [lpho, setLpho] = React.useState(edt.lpho);
    const [plat, setPlat] = React.useState(edt.plat);
    const [used, setUsed] = React.useState(edt.used);
    const [expire, setExpire] = React.useState(edt.expire);
    const [move, setMove] = React.useState(edt.move);
    const [money, setMoney] = React.useState(edt.money);
    const [impt, setImpt] = React.useState(edt.impt);
    const [titl, setTitl] = React.useState(edt.titl);
    const [model, setModel] = React.useState(edt.model);
    const [fno, setFno] = React.useState(edt.fno);
    const [plno, setPlno] = React.useState(edt.plno);
    const [mkd, setMkd] = React.useState(edt.mkd);
    const [sno, setSno] = React.useState(edt.sno);
    const [owner, setOwner] = React.useState(save? save.owner : edt.owner);
    const [remu, setRemu] = React.useState(save? save.remu : edt.remu);
    const [repu, setRepu] = React.useState(save? save.repu : edt.repu);
    const [insu, setInsu] = React.useState(save? save.insu : edt.insu);
    const [makeu, setMakeu] = React.useState(save? save.makeu : edt.makeu);
    const [mtu, setMtu] = React.useState(save? save.mtu : edt.mtu);
    const [ispu, setIspu] = React.useState(edt.ispu);
    //const [useu, setUseu] = React.useState((qs?.useu&&JSON.parse(qs?.useu as string)) || edt.useu);
    //【烦人】假如从其它页面跳转本页面的，并且也给出本页面某一个字段的选择值，其它字段都是空的呢？混淆语义!从伪对话框页面返回这里或指定某个字段值简单地跳入本页面的情况不一样,数据初始值不同。
    const [useu, setUseu] = React.useState(save? save.useu : edt.useu);
    const [usud, setUsud] = React.useState(edt.usud);
    //const [pos, setPos] = React.useState(edt.pos);选择地址id模式:变成了 ad选择 vlg选择 geo点选坐标; lon=lat==0?
    const geonull= !edt.lat || !edt.lon || (edt.lat==='0' && edt.lon==='0');     //特殊位置[0,0]:西非的大海中。
    const [geo, setGeo] = React.useState<any>( !geonull && {lat:edt.lat, lon:edt.lon});
    const [plcls, setPlcls] = React.useState(edt.plcls);
    const [seimp, setSeimp] = React.useState(edt.seimp);
    const [dense, setDense] = React.useState(edt.dense);
    const [address, setAddress] = React.useState(edt.address);      //不需要要区划前缀部分
    const [ad, setAd] = React.useState(edt.ad);     //使用地址的行政区划管理单元
    const [vlg, setVlg] = React.useState(edt.vlg);
    const [insd, setInsd] = React.useState(edt.insd);

    //const [设计许号, set设计许号] = React.useState(svp?.设计许号);
    const [产品标准, set产品标准] = React.useState(svp?.产品标准);
    const [设计图号, set设计图号] = React.useState(svp?.设计图号);
    //const [合格证号, set合格证号] = React.useState(svp?.合格证号);  "产品合格证编号，质量证明书"
    //const [固资值, set固资值] = React.useState(svp?.固资值);   //监察临时表才有的字段
    const [总重量, set总重量] = React.useState(svp?.总重量);
    const [大修周期, set大修周期] = React.useState(svp?.大修周期);
    //const [施工类别, set施工类别] = React.useState(svp?.施工类别);
    //const [施工日期, set施工日期] = React.useState(svp?.施工日期);
    const [竣验日, set竣验日] = React.useState(svp?.竣验日);
    //const [施工号, set施工号] = React.useState(svp?.施工号);
    const [制造国, set制造国] = React.useState(svp?.制造国);
    const [年限, set年限] = React.useState(svp?.年限);
    const [设计日期, set设计日期] = React.useState(svp?.设计日期);
    const [型试报告, set型试报告] = React.useState(svp?.型试报告);
    const [重监控, set重监控] = React.useState(svp?.重监控);
    const [装项负责, set装项负责] = React.useState(svp?.装项负责);
    const [装联电, set装联电] = React.useState(svp?.装联电);
    const [维周期, set维周期] = React.useState(svp?.维周期);
    const [设鉴单位, set设鉴单位] = React.useState(svp?.设鉴单位);
    //特殊 svp pa 内容：格式json，转换?   伪对话框保存恢复的?.state{save:{svp:{}}}存储 和 eqp传递进来的svp?格式{edtIn.svp{对象化了}}不同？
    //单位选择模式：这些单位字段： 原先预想是ID,现在改成对象套一层 {id:ID,name:'中文名字'} ;URL要转换吗?
    const [造监检单, set造监检单] = React.useState(save? save.svp?.造监检单 : svp?.造监检单);
    //const [土建验单, set土建验单] = React.useState((qs?.土建验单&&JSON.parse(qs?.土建验单 as string)) || svp?.土建验单);  抛弃！
    //const [土建施单, set土建施单] = React.useState((qs?.土建施单&&JSON.parse(qs?.土建施单 as string)) || svp?.土建施单); 土建施工单位 ?监察平台告知单的，本平台抛弃不搞。
    const [设计单位, set设计单位] = React.useState(save? save.svp?.设计单位 : svp?.设计单位);
    //const [设鉴单位, set设鉴单位] = React.useState((qs?.设鉴单位&&JSON.parse(qs?.设鉴单位 as string)) || svp?.设鉴单位); 改成文本，
    const [型试单位, set型试单位] = React.useState(save? save.svp?.型试单位 : svp?.型试单位);

    //锅炉有的？？ 设计规范

    const [急救电, set急救电] = React.useState(pa?.急救电);
    const [急救人, set急救人] = React.useState(pa?.急救人);
    const [联系电, set联系电] = React.useState(pa?.联系电);
    const [联系人, set联系人] = React.useState(pa?.联系人);
    const [维保电, set维保电] = React.useState(pa?.维保电);

    const {ust,reg,rcod,uscd,cert,cerd,regu,rnam,regd,cand,svu,nxtd1,nxtd2,isp1,isp2,type,ispud, } =edt;
    //console.log("useCommnBaseParm_hg23re如今edt--pos=", pos);
    //只读的部分也要传递过去啊, 不能输入:
    const readOnly ={ust,reg,rcod,uscd,cert,cerd,regu,rnam,regd,cand,svu,nxtd1,nxtd2,isp1,isp2,type,ispud, };
    //console.log("useCommnBaseParm_hg23re如今 readOnly=", readOnly);
    //下面的usObj mtObj是特殊需求的。 ocat前端确保只读的。
    //状态字段分离成3部分了 out: svpO: paO:方便区分。
    //底下的usObj: useu?.id===eqp.useu?.id ? eqp.useu : useu,逻辑不对：id of CompanyEs: ? Unit:? 模型抬头不同。

    return {
        setCpa,setVital,
        setLpho,setPlat,setUsed,setExpire,setMove,setMoney,setImpt,setTitl,
        setModel,setFno,setPlno,setMakeu,setMkd,setSno,setOwner,setRemu,setRepu,
        setInsu,setMtu,setIspu,setUseu,setInsd,
        setUsud,setGeo,setPlcls,setSeimp,setDense,setAddress,setAd,setVlg,
        set产品标准,set制造国,set设计图号,
        set总重量,set大修周期,set竣验日,
        set年限,set设计日期,
        set造监检单,set设计单位,
        set急救电,set急救人,set联系电,set联系人,
        set设鉴单位,set型试单位,set型试报告,set重监控,set装项负责,set装联电,
        set维保电,set维周期,
        svpO: {
            产品标准,设计图号,总重量,
            大修周期,制造国,年限,设计日期,竣验日,
            造监检单,设计单位,
            设鉴单位,型试单位,型试报告,重监控,装项负责,装联电,维周期,
        },
        paO: {
            急救电,急救人,联系电,联系人,维保电,
        },
        out:{
            cpa,vital,
            lpho,plat,used,expire,move,money,impt,titl,model,fno,plno,
            makeu,mkd,sno,owner,remu,repu,insu,mtu,ispu,useu,
            usud,geo,plcls,seimp,dense,address,ad,vlg,insd,
            ocat: eqp.ocat,
            usObj: eqp.useu,
            mtObj: mtu?.id===eqp.mtu?.id ? eqp.mtu : mtu,
            ...readOnly,
        }
    };
}


interface CommnBaseprops {
    readOnly?: boolean;
    editable?: boolean;
    cbp:any;    //配对的Hook返回值; Eqp不能直接复制透传。
    id:string;
    //qs?:any;    //[作废了！] URL搜索?参数
    //确认时刻 组合字段用的：
    confirmation:()=>any;
}

/**各种设备种类都要有的字段： 技术参数？
 * 这个组件的内部状态设置[x,setX]的x字段，在父辈组件中的保存确认回调函数也需要读取到并组合(可能多个子组件数据源)。
 * 设备台账各种类 设备公共一大块的 可编辑显示部分。
 * 配合cbp=useCommnBaseParm()把这些编辑器字段状态注入的。
 * 因为确认函数confirmation()=>{}必须用到cbp{}里面的具体的各个字段啊，所以只能肢解出来，拆开了。
 * */
export const CommnBase: React.FunctionComponent<CommnBaseprops> = ({
    readOnly,
    editable,
    cbp,
    id,
    confirmation
    }) =>
{
    //[为了可复用，倒腾一手] 配套的set，实际只需[x,setX]的x字段。
    const {setCpa,setVital,setLpho,setPlat,setUsed,setExpire,
        setMove,setMoney,setImpt,setTitl,setModel,setFno,setPlno,
        setMakeu,setMkd,setSno,setOwner,setRemu,setRepu,
        setInsu,setMtu,setIspu,setUseu,setInsd,
        setUsud,setGeo,setPlcls,setSeimp,setDense,setAddress,setAd,setVlg,
        set产品标准,set制造国,set设计图号,
        set总重量,set大修周期,set竣验日,
        set年限,set设计日期,
        set造监检单,set设计单位,
        set急救电,set急救人,set联系电,set联系人,
        set设鉴单位,set型试单位,set型试报告,set重监控,set装项负责,set装联电,
        set维保电,set维周期,
    } =cbp;
    //[为了可复用，倒腾一手] 提取各个字段项目 状态管理函数 + 状态;
    //这里的usObj: edtIn.useu可能已经被污染或者重新选择新的使用单位了而导致save|useu就只剩下了{id,name}？考虑 提示
    const {cpa,vital,lpho,plat,used,expire,move,money,
        impt,titl,model,fno,plno,makeu,mkd,
        ust,uscd,cert,cerd,reg,sno,rcod,
        regu,rnam,regd,cand,owner,remu,repu,insu,mtu,
        usud,geo,plcls,seimp,dense,address,ad,vlg,
        svu,ispu,ispud,useu,insd,ocat,
        usObj,nxtd1,nxtd2,isp1,isp2,type,mtObj,
    } =cbp.out;
    const {产品标准,设计图号,总重量,
        大修周期,制造国,年限,设计日期,竣验日,
        造监检单,设计单位,
        设鉴单位,型试单位,型试报告,重监控,装项负责,装联电,维周期,
    } =cbp.svpO;
    const {急救电,急救人,联系电,联系人,维保电,
    } =cbp.paO;

    const [useuMgt, setUseuMgt] = React.useState<number>(!usud? 0 : usud?.branch? 2 : 1);
    console.log("useCommnBaseParm追踪的如今 useuMgt=", useuMgt);
    const ispStat1= !isp1?.report?.stm? '完成': isp1?.report?.stm.sta==='END'? '完成': isp1.task&&isp1.task.origd? '延期检验': '进行中(正常)';
    const ispStat2= !isp2?.report?.stm? '完成': isp2?.report?.stm.sta==='END'? '完成': isp2.task&&isp2.task.origd? '延期检验': '进行中(正常)';
    const { field}= window.history.state?.state??{};     //通用伪对话框传递格式field=上次跳转目标选择字段。


  return (
    <React.Fragment>
        <Text variant="h5">基本信息</Text>
        <LineColumn >
            <InputLine label={`注册登记状态:`}>
                <Select inputSize="md"  disabled  value={ reg || ''}  >
                    { 注登状态s.map(([enumv,title],i) => (<option key={i} value={enumv}>{title}</option> )) } </Select>
            </InputLine>
            <InputLine label={`使用状态:`}>
                <Select inputSize="md"  disabled  value={ ust || ''}  >
                    { 使用状态s.map(([enumv,title],i) => (<option key={i} value={enumv}>{title}</option> )) } </Select>
            </InputLine>
            <InputLine label={`目录外:`}>
                <CheckSwitch readOnly={true}  checked={ocat || false} onChange={e =>0 } />
            </InputLine>
            <InputLine label={`状态变更日期:`}>
                <Input type='date' readOnly={true} value={ uscd  || ''} />
            </InputLine>
            <InputLine label={`使用证号:`}>
                { cert? <Input readOnly={true} value={cert || ''}/>
                        :
                    <SuffixInput  readOnly  component={InputPure}  value={cert || '' } >
                        <IconButton  variant="ghost"  icon={<IconAnchor />}  label="生成"
                             onClick={async (e) => { } }
                        />
                    </SuffixInput>
                }
            </InputLine>
            <InputLine label={`(使用证)发证日期:`}>
                <Input type='date' readOnly={true} value={ cerd  || ''} />
            </InputLine>
            <InputLine label={`出厂编号:`}>
                <CommitInput  value={ fno || ''}  onSave={txt => setFno(txt||undefined) } />
            </InputLine>
            <InputLine label={`单位内部编号:`}>
                <CommitInput  value={ plno || ''}  onSave={txt => setPlno(txt||undefined) } />
            </InputLine>
            <InputLine label={`产权单位:`}>
                <ChooseUnit id={owner?.id} name={owner?.name}  field={'owner'}
                            autoFocus={field==='owner'}
                            onCancel={() => { setOwner(undefined) }}
                            onDialog={async () => { return await confirmation() } }
                />
            </InputLine>
            <InputLine label={`责任监察机构:`}>
                <Input  readOnly={true} value={ svu?.company?.name || ''} />
            </InputLine>
            <InputLine label={`检验机构(指定):`}>
                <Input  readOnly={true} value={ ispu?.name || ''} />
            </InputLine>
            <InputLine label={`检验机构的部门:`}>
                <Input  readOnly={true} value={ ispud?.name || ''} />
            </InputLine>
        </LineColumn>
        <Text variant="h5">使用地点</Text>
        <LineColumn >
            <InputLine label={`安装使用地区域(点击进入选择):`}>
                <AdminunitChoose  name={ad?.name}   setEditorVar={setAd}
                            pos={ad}  onCancel={() => { setAd(undefined) }} />
            </InputLine>
            <InputLine label={'楼盘名称(点击进入选择):'}>
                <VillageChoose id={vlg?.id} name={vlg?.name}   setEditorVar={setVlg}
                               onCancel={() => { setVlg(undefined) }}   parentId={ad?.id} />
            </InputLine>
            <InputLine label={`设备使用场所(公众聚集场所标签):`}>
                <InputDatalist
                    value={ plcls || ''}
                    onListChange={v => setPlcls(v ||undefined)}
                    datalist={公众聚集场所}
                />
            </InputLine>
            <InputLine label={`是否在重要场所:`}>
                <CheckSwitch  checked={seimp || false} onChange={e => setSeimp(seimp? undefined:true) } />
            </InputLine>
            <InputLine label={`是否人口密集区:`}>
                <CheckSwitch  checked={dense || false} onChange={e => setDense(dense? undefined:true) } />
            </InputLine>
            <InputLine label={'点选地图坐标经度纬度:'}>
                <GeoMapChoose  geo={geo}   setEditorVar={setGeo}
                               onCancel={() => { setGeo(undefined) }} />
            </InputLine>
            <InputLine label={`使用地点地址(前面行政地区描述不填):`}>
                <CommitInput  value={ address || ''}  onSave={txt => setAddress(txt||undefined) } />
            </InputLine>
        </LineColumn>
        <Text variant="h5">监察参数</Text>
        <LineColumn >
            <InputLine label={`国家代码(设备代码):`}>
                <CommitInput  value={ sno || ''}  onSave={txt => setSno(txt||undefined) } />
            </InputLine>
            <InputLine label={`注册代码:`}>
                <Input  readOnly={true} value={ rcod  || ''} />
            </InputLine>
            <InputLine label={`注册机构:`}>
                <Input  readOnly={true} value={ regu?.company?.name || ''} />
            </InputLine>
            <InputLine label={`注册登记人员:`}>
                <Input  readOnly={true} value={ rnam || ''} />
            </InputLine>
            <InputLine label={`注册登记日期:`}>
                <Input type='date' readOnly={true} value={ regd  || ''} />
            </InputLine>
            { cand && <InputLine label={`注册登记注销日期:`}>
                          <Input type='date' readOnly={true} value={ cand  || ''} />
                     </InputLine>
            }
            <InputLine label={`是否重要特种设备:`}>
                <CheckSwitch  checked= {vital || false}
                    onChange={e => setVital(vital? undefined:true) }
                />
            </InputLine>
            <InputLine label={`是否重点监控:`}>
                <CheckSwitch  checked= {重监控 || false}
                    onChange={e => set重监控(重监控? undefined:true) }
                />
            </InputLine>
            <InputLine label={`事故隐患类别:`}>
                <Select
                    value={ cpa || ''}
                    onChange={e => setCpa( e.currentTarget.value||undefined ) }
                >
                    <option> </option>
                    { 事故隐患类别.map((one,i) => (
                        <option key={i} value={i+1}>{one}</option>
                    )) }
                </Select>
            </InputLine>
            <InputLine label={`制造国:`}>
                <InputDatalist  value={ 制造国 || ''}
                    onListChange={v => set制造国(v ||undefined)}
                    datalist={制造国s} />
            </InputLine>
            <InputLine label={`设计使用年限:`}>
                <SuffixInput type="text"  value={ 年限 || ''}
                   onSave={txt=> set年限(txt||undefined)}
                >年</SuffixInput>
            </InputLine>
            <InputLine label={`大修周期:`}>
                <SuffixInput type="number"  value={ 大修周期 || ''}
                   onSave={txt=> set大修周期(txt||undefined)}
                >月</SuffixInput>
            </InputLine>
            <InputLine label={`是否(流动作业)移动设备:`}>
                <CheckSwitch  checked= {move || false}
                              onChange={e => setMove(move? undefined:true) }
                />
            </InputLine>
            <InputLine label={`维保单位:`}>
                <ChooseUnit id={mtu?.id} name={mtu?.name}  field={'mtu'}
                            autoFocus={field==='mtu'}
                            onCancel={() => { setMtu(undefined) }}
                            onDialog={async () => { return await confirmation() } }
                />
            </InputLine>
            <InputLine label={`维保电话:`}>
                <CommitInput value={ 维保电 || ''}  onSave={txt => set维保电(txt||undefined) } />
            </InputLine>
            <InputLine label={`维保周期:`}>
                <SuffixInput type="number" value={ 维周期 || ''}  onSave={txt=> set维周期(txt||undefined)}
                >月</SuffixInput>
            </InputLine>

        </LineColumn>
        <Text variant="h5">许可用的参数</Text>
        <LineColumn >
            <InputLine label={`进口类型:`}>
                <Select  value={ impt || ''}
                    onChange={e => setImpt( e.currentTarget.value||undefined ) } >
                    <option> </option>
                    { 进口类型.map((one,i) => (
                        <option key={i} value={i+1}>{one}</option>
                    )) }
                </Select>
            </InputLine>
            <InputLine label={`设备(装置)名称:`}>
                <CommitInput  value={ titl || ''}  onSave={txt => setTitl(txt||undefined) } />
            </InputLine>
            <InputLine label={`设备型号:`}>
                <CommitInput  value={ model || ''}  onSave={txt => setModel(txt||undefined) } />
            </InputLine>
            <InputLine label={`设计日期:`}>
                <Input type='date'  value={ 设计日期  || ''}
                       onChange={e => set设计日期( e.currentTarget.value||undefined ) } />
            </InputLine>
            <InputLine label={'制造监检机构'}>
                <ChooseUnit id={造监检单?.id} name={造监检单?.name}  field={'造监检单'} p1field={'svp'}
                            autoFocus={field==='造监检单'}
                            onCancel={() => { set造监检单( undefined ) }}
                            onDialog={async () => { return await confirmation() } }
                />
            </InputLine>
            <InputLine label={`制造日期:`}>
                <Input type='date'  value={ mkd  || ''}
                       onChange={e => setMkd( e.currentTarget.value||undefined ) } />
            </InputLine>
            <InputLine label={`制造单位:`}>
                <ChooseUnit id={makeu?.id} name={makeu?.name}  field={'makeu'}
                            autoFocus={field==='makeu'}
                            onCancel={() => { setMakeu(undefined) }}
                            onDialog={async () => { return await confirmation() } }
                />
            </InputLine>
            <InputLine label={`安装单位:`}>
                <ChooseUnit id={insu?.id} name={insu?.name}  field={'insu'}
                            autoFocus={field==='insu'}
                            onCancel={() => { setInsu(undefined) }}
                            onDialog={async () => { return await confirmation() } }
                />
            </InputLine>

        </LineColumn>
        <Text variant="h5">监检准入参数</Text>
        <LineColumn >
            <InputLine label={`竣工验收日期:`}>
                <Input type='date'  value={ 竣验日  || ''}
                       onChange={e => set竣验日( e.currentTarget.value||undefined ) } />
            </InputLine>
            <InputLine label={`设计单位:`}>
                <ChooseUnit id={设计单位?.id} name={设计单位?.name}  field={'设计单位'} p1field={'svp'}
                            autoFocus={field==='设计单位'}
                            onCancel={() => { set设计单位(undefined) }}
                            onDialog={async () => { return await confirmation() } }
                />
            </InputLine>
            <InputLine label={`产品标准:`}>
                <CommitInput  value={ 产品标准 || ''} onSave={txt => set产品标准(txt||undefined) } />
            </InputLine>
            <InputLine label={`设计图号:`}>
                <CommitInput  value={ 设计图号 || ''} onSave={txt => set设计图号(txt||undefined) } />
            </InputLine>
            <InputLine label={`安装竣工日期:`}>
                <Input type='date'  value={ insd  || ''}
                       onChange={e => setInsd( e.currentTarget.value||undefined ) } />
            </InputLine>
            <InputLine label={`设备总重量:`}>
                <SuffixInput type="number" value={ 总重量 || ''}
                    onSave={txt=> set总重量(txt||undefined)}
                >kg</SuffixInput>
            </InputLine>
            <InputLine label={`应急救援电话:`}>
                <CommitInput type="tel"  value={ 急救电 || ''}  onSave={txt => set急救电(txt||undefined) } />
            </InputLine>
            <InputLine label={`应急救援人名:`}>
                <CommitInput value={ 急救人 || ''}  onSave={txt => set急救人(txt||undefined) } />
            </InputLine>
            <InputLine label={`改造单位:`}>
                <ChooseUnit id={remu?.id} name={remu?.name}  field={'remu'}
                            autoFocus={field==='remu'}
                            onCancel={() => { setRemu(undefined) }}
                            onDialog={async () => { return await confirmation() } }
                />
            </InputLine>
            <InputLine label={`安装项目负责人:`}>
                <CommitInput  value={ 装项负责 || ''}  onSave={txt => set装项负责(txt||undefined) } />
            </InputLine>
            <InputLine label={`安装联系电话:`}>
                <CommitInput type="tel"  value={ 装联电 || ''}  onSave={txt => set装联电(txt||undefined) } />
            </InputLine>


        </LineColumn>
        <Text variant="h5">使用单位信息</Text>
        <LineColumn >
            <InputLine label={`使用单位:`}>
                <ChooseUnit id={useu?.id} name={useu?.name}  field={'useu'}
                            autoFocus={field==='useu'}
                            onCancel={() => { setUseu(undefined); setUsud(undefined); }}
                            onDialog={async () => { return await confirmation() } }
                />
            </InputLine>
            <InputLine label={usObj?.company? `社会信用代码:` : '身份证号码:'}>
                <Input  readOnly={true} value={(usObj?.company? usObj?.company?.no : usObj?.person?.no) || ''} />
            </InputLine>
            <InputLine label={`安全管理部门类型：`}>
                <Select inputSize="md"  value={ useuMgt || ''}
                        onChange={e =>{
                            const  inmgt=e.currentTarget.value || 0  as number;
                            setUseuMgt(inmgt as number);
                            if(inmgt===0)    setUsud(undefined);
                        } } >
                    { 安全管理部门.map((one,i) => (<option key={i} value={i}>{one}</option> )) } </Select>
            </InputLine>
            <InputLine label={'地址:'}>
                <Input readOnly={true} value={ ( (usud?.branch)? usud?.address :
                    (usObj?.company? usObj?.company?.address : usObj?.person?.address) ) || ''} />
            </InputLine>
            <InputLine label={'使用单位联系人:'}>
                <Input readOnly={true} value={ ( usud? usud?.linkMen :
                    (usObj?.company? usObj?.company?.linkMen : usObj?.person?.name) ) || ''} />
            </InputLine>
            <InputLine label={'使用单位联系手机:'}>
                <Input readOnly={true} value={ ( usud? usud?.phone :
                    (usObj?.company? usObj?.company?.phone : usObj?.person?.phone) ) || ''} />
            </InputLine>
            { (useuMgt===1 || useuMgt===2) &&
                <InputLine label={useuMgt===2? '分支机构:' : '安全管理部门:'}>
                    <DivisionChoose id={usud?.id} name={usud?.name}   setEditorVar={setUsud}
                          onCancel={() => { setUsud(undefined) }}   unitId={usObj.id}
                    />
                </InputLine>
            }

        </LineColumn>
        <Text variant="h5">检验相关信息</Text>
        <LineColumn >
            <InputLine label={`下次检验日期1(${type==='8'?'管道在线检验':'在线年度外检'}):`}>
                <Input type='date' readOnly  value={ nxtd1  || ''} />
            </InputLine>
            <InputLine label={`下次检验日期2(${type==='8'?'管道全面检验':'定检内检全面'}):`}>
                <Input type='date' readOnly  value={ nxtd2  || ''} />
            </InputLine>
            <InputLine label={`上次检验报告号1:`}>
                <Input  readOnly  value={ isp1?.no || ''} />
            </InputLine>
            <InputLine label={`上次检验报告号2:`}>
                <Input  readOnly  value={ isp2?.no || ''} />
            </InputLine>
            <InputLine label={`上次检验日期1:`}>
                <Input type='date' readOnly  value={ isp1?.ispDate  || ''} />
            </InputLine>
            <InputLine label={`上次检验日期2:`}>
                <Input type='date' readOnly  value={ isp2?.ispDate  || ''} />
            </InputLine>
            <InputLine label={`上次检验结论1:`}>
                <Input  readOnly  value={ isp1?.conclusion || ''} />
            </InputLine>
            <InputLine label={`上次检验结论2:`}>
                <Input  readOnly  value={ isp2?.conclusion || ''} />
            </InputLine>
            { isp1 &&
                <InputLine label={`上次检验业务类型1:`}>
                    <Select inputSize="md"  disabled  value={ isp1?.bsType || ''}  >
                        { 业务类型s.map(([enumv,title],i) => (<option key={i} value={enumv}>{title}</option> )) } </Select>
                </InputLine>
            }
            { isp2 &&
                <InputLine label={`上次检验业务类型2:`}>
                    <Select inputSize="md"  disabled  value={ isp2?.bsType || ''}  >
                        { 业务类型s.map(([enumv,title],i) => (<option key={i} value={enumv}>{title}</option> )) } </Select>
                </InputLine>
            }
            { ispStat1!=='完成' &&
                <InputLine label={`检验1(状态：${ispStat1})日期:`}>
                    <Input type='date' readOnly  value={ isp1.task?.date  || ''} />
                </InputLine>
            }
            { ispStat2!=='完成' &&
                <InputLine label={`检验2(状态：${ispStat2})日期:`}>
                    <Input type='date' readOnly  value={ isp2.task?.date  || ''} />
                </InputLine>
            }
        </LineColumn>
        <Text variant="h5">其它参数</Text>
        <LineColumn >
            <InputLine label={`设备联系手机:`}>
                <CommitInput type="tel"  value={ lpho || ''}  onSave={txt => setLpho(txt||undefined) } />
            </InputLine>
            <InputLine label={`设备联系电话:`}>
                <CommitInput type="tel"  value={ 联系电 || ''}  onSave={txt => set联系电(txt||undefined) } />
            </InputLine>
            <InputLine label={`设备联系人:`}>
                <CommitInput value={ 联系人 || ''}  onSave={txt => set联系人(txt||undefined) } />
            </InputLine>
            <InputLine label={`投入使用日期:`}>
                <Input type='date'  value={ used  || ''}
                       onChange={e => setUsed( e.currentTarget.value||undefined ) } />
            </InputLine>
            <InputLine label={`(设计)使用年限到期时间:`}>
                <Input type='date'  value={ expire  || ''}
                       onChange={e => setExpire( e.currentTarget.value||undefined ) } />
            </InputLine>
            <InputLine label={`设计(文件)鉴定单位:`}>
                <CommitInput  value={ 设鉴单位 || ''}  onSave={txt => set设鉴单位(txt||undefined) } />
            </InputLine>
            <InputLine label={`型式试验单位:`}>
                <ChooseUnit id={型试单位?.id} name={型试单位?.name}  field={'型试单位'} p1field={'svp'}
                            autoFocus={field==='型试单位'}
                            onCancel={() => { set型试单位( undefined ) }}
                            onDialog={async () => { return await confirmation() } }
                />
            </InputLine>
            <InputLine label={`型式试验报告编号:`}>
                <CommitInput value={ 型试报告 || ''}  onSave={txt => set型试报告(txt||undefined) } />
            </InputLine>
            <InputLine label={`设备销售价:`}>
                <SuffixInput id='money'  type="number"  value={ money || ''}
                             onSave={txt=> setMoney(txt||undefined)}
                >元</SuffixInput>
            </InputLine>
            <InputLine label={`维修单位:`}>
                <ChooseUnit id={repu?.id} name={repu?.name}  field={'repu'}
                            autoFocus={field==='repu'}
                            onCancel={() => { setRepu(undefined) }}
                            onDialog={async () => { return await confirmation() } }
                />
            </InputLine>
            <InputLine label={`厂车（罐车）汽车牌照号:`}>
                <CommitInput  value={ plat || ''}  onSave={txt => setPlat(txt||undefined) } />
            </InputLine>
        </LineColumn>

    </React.Fragment>
  );
};

